<template>
	<view>
		<view class="w-100  pt30 pb60">
			<!-- <view class="pr40 pl72 pt40 rowa" v-if="userInfo.waitApprovedStatus!='PASS'">
				<view class="mw32 mt8 h32 bc000 cfff br-50 tc lh32 fs24">!</view>
				<view class="ml14 c333 fs28 lh44">
					{{userInfo.remarks==null?"请上传个人的真实照片，通过后这样才能匹配到高质量好  哦~":userInfo.remarks}}
				</view>
			</view> -->
			<view class="pr32 pl32  rowa">
				<view class="relative" @click="showSingleNoPopup(0)">
					<image class="w328 br24 h328 blc " :src="userInfo.img1"
						mode="aspectFill"></image>
					<view class="absolute w328 h328 rowjcic  top0">
						<view class="w186 h52 lh52 tc cfff fs28 br10" style="background-color: rgba(0,0,0,0.3);">头像/封面
						</view>
					</view>
				</view>
				<view class="h328 crowjb">
					<view class="ml30 w-100">
						<view class="rowjbic  pr30 w-100 warp h328">
							<view @click="showSingleNoPopup(1)"
								v-if="userInfo.img2">
								<image class="w150 h150 br24 blc" :src="userInfo.img2" mode="aspectFill">
								</image>
							</view>
							<block v-else class="fs0">
								<view @click="showSingleNoPopup(1)" class="w150 fs99 tc  h150 br24 blc"
									style="color: #D5D5D5; background-color: #EBEBEB;">
									+
								</view>
							</block>
							<view @click="showSingleNoPopup(2)"
								v-if="userInfo.img3">
								<image class="w150 h150 br24 blc" :src="userInfo.img3" mode="aspectFill">
								</image>
							</view>
							<block v-else class="fs0">
								<view @click="showSingleNoPopup(2)" class="w150 fs99 tc  h150 br24 blc"
									style="color: #D5D5D5; background-color: #EBEBEB;">
									+
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w690 p30 bcfff br20 ml30 mt35" style="margin-top: -30rpx;">
			<view class="rowjbic">
				<view class="rowic">
					<image src="../../static/images/indexabout.png" class="w30 h30" mode="aspectFill"></image>
					<view style="color: #434343;" class="fs28 fwb ml10">基础资料</view>
				</view>
				<view class="w120 h52 lh52 tc br100 fs28" @click="gotoeditInfo"
					style="color: #434343; background-color: #F5F6FA;">查看</view>
			</view>
			<view class="rowic mt40">
				<view class="fs40 fwb" style="color: #4A4A4A;">{{userInfo.name}}</view>
				<image class="w48 h48 br-50 ml30"
					:src="userInfo.sex=='1' ?'/static/images/like/male.png': '/static/xiugai/nv.png'" mode="aspectFill">
				</image>
			</view>
			<view class="fs28 fwb c333 rowic mt25">
				<view>
					<text v-if="userInfo.age">{{userInfo.age}}岁 · </text>
					<text v-if="userInfo.height">{{' ' + userInfo.height}}cm · </text>
					<text v-if="userInfo.weight">{{' ' + userInfo.weight}}kg</text>
				</view>
				<view class="fs24 w3 ml30 mr30 h24" style="background-color: #E0E2E8;"></view>
				<view> <text>{{ userInfo.nation ? userInfo.nation : '' }}</text></view>
			</view>
			<view class="rowic mt36">
				<image class="w42 h42" src="../../static/images/indexlable.png" mode="aspectFill"></image>
				<view class="fs24 ml10 c333">正在寻觅</view>
			</view>
			<view class="w690 rowjbic" style="margin-left: -30rpx;">
				<view class="circle"></view>
				<view v-for="(item,index) in 10" :key='index' class="w30 h3" style="background-color:  #C8D3E2;"></view>
				<view class="circleA"></view>
			</view>
			<view
				style="margin-top: 25rpx; margin-right: 40rpx;display: flex;flex-warp:warp;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
				<view style="margin-left: 10rpx;margin-top: 10rpx;">
					<u-tag :text="'月收入：'+userInfo.income+'元'" type="warning" shape="circle"
						v-if="userInfo.income"></u-tag>
				</view>
				<view style="margin-left: 10rpx;margin-top: 10rpx;">
					<u-tag :text="'机构：'+userInfo.deptName" shape="circle"
						v-if="userInfo.deptName"></u-tag>
				</view>
			
			</view>
		</view>
		<view class="w690 p30 bcfff br20 mt30 ml30 p30">
			<view class="rowic">
				<image class="w30 h30" src="/static/xiugai/2.png" mode="aspectFill"></image>
				<view style="color: #434343;" class="fs28 fwb ml10">身份认证</view>
			</view>
			<view class="rowjbic mt25">
				<view class="fs28 fwb" style="color: #434343;">身份认证</view>
				<view class="w120 h52 lh52 tc br100 fs28" style="color: #434343; background-color: #F5F6FA;">已认证</view>
			</view>
		</view>
		<view class="w690 p30 bcfff br20 mt30 ml30 p30">
			<view class="rowjbic">
				<view class="rowic">
					<image class="w30 h30" src="/static/images/indexinterest.png" mode="aspectFill"></image>
					<view style="color: #434343;" class="fs28 fwb ml10">自我介绍</view>

				</view>
				<view class="w120 h52 lh52 tc br100 fs28" @click="gotoEditText(1,userInfo.introduce)"
					style="color: #434343; background-color: #F5F6FA;">编辑</view>
			</view>
			<view class=" mt25 fs28" style="color: #434343; ">
				<view>{{userInfo.introduce}}</view>
			</view>
		</view>
		<view class="w690 p30 bcfff br20 mt30 ml30 p30">
			<view class="rowjbic">
				<view class="rowic">
					<image class="w30 h30" src="/static/images/indexinterest.png" mode="aspectFill"></image>
					<view style="color: #434343;" class="fs28 fwb ml10">个性标签</view>

				</view>
				<view class="w120 h52 lh52 tc br100 fs28" @click="gototags()"
					style="color: #434343; background-color: #F5F6FA;">编辑</view>
			</view>
			<view class=" mt25 fs28" style="color: #434343; ">
				<view
					style="margin-top: 25rpx; margin-right: 40rpx;display: flex;flex-warp:warp;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
					<view v-for="(item,index) in userInfo.labelList" :key="index" style="margin: 10rpx;">
						<u-tag :text="item.remark" shape="circle"></u-tag>
					</view>

				</view>
			</view>
		</view>
		<view class="h40" style="padding-top: 30rpx;"></view>
		<!-- 单列不滚动 -->
		<u-popup :show="singleNoShow" @close="singleNoClose" mode="bottom">
			<view class="singleNo" style="border-radius: 24rpx 24rpx 0px 0px;">
				<view class="singleNo-item" @click="singleNoItem(1)">上传</view>
				<!-- <view class="singleNo-item" @click="singleNoItem(2)">删除</view> -->
				<view class="linkage-close" @click="singleNoClose">
					取消
				</view>
			</view>
		</u-popup>
		<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
	</view>
</template>

<script>
	import {
		getUserDetail,
		updateUserInfo,
		uploadFile
	} from '../../common/api.js'
	import ELM from '@/components/elm-toast/index.vue';
	export default {
		data() {
			return {
				multiple: 100, //倍数
				percent: 0, //百分比
				perceptualScore: 0,

				value: 40,
				img: this.$BASE_URL,
				bgColor: 'rgb(232,241,247)',
				userInfo: {},
				// 新上传的图片路径
				newImageSrc: "",
				// 单列不滚动
				singleNoShow: false,
				singleIndex: 0,
				numtwo: 0,
				waitApprovedImg: [],
				tipMsg: '',
				isConfirm: false
			}
		},
		components: {
			ELM
		},
		onLoad(option) {
			//  this.$myRequest({
			// 	url: '/test/delete/fruser/'+51,
			// 	withToken: true,
			// 	method: 'GET',
			// })
			// uni.$once('updateAboutMe', this.updateAboutMe)
			// uni.$once('updateLoveRequirement', this.updateLoveRequirement)
			// uni.$once('updateInterest', this.updateInterest)

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				getUserDetail({
					userId: this.vuex_userid
				}).then(res => {
					this.userInfo = res.data;
					var imgList = [];
					if (res.data.img1) {
						this.userInfo.img1 = this.vuex_api + '/sysFileInfo/preview?id=' + res.data.img1
					}
					if (res.data.img2) {
						this.userInfo.img2 = this.vuex_api + '/sysFileInfo/preview?id=' + res.data.img2
					}
					if (res.data.img3) {
						this.userInfo.img3 = this.vuex_api + '/sysFileInfo/preview?id=' + res.data.img3
					}
					// this.userInfo.imgList = imgList;
				}).catch({

				})
			},
			gototags() {
				uni.navigateTo({
					url: '/pageslogin/index/tagsData'
				})
			},
			gotomation() {
				// uni.navigateTo({
				// 	url:"/pagesme/me/identityauthentication?type="+type
				// })
				uni.navigateTo({
					url: "/pagesme/me/doubleauth"
				})
			},
			gotoeducation(type) {
				// uni.navigateTo({
				// 	url:"/pagesme/me/educationcertification?type="+type
				// })
				uni.navigateTo({
					url: "/pagesme/me/doubleauth?type=" + type
				})
			},
			BackPage(val) {
				console.log(val);
				if (val.type == 1) {
					this.userInfo.aboutMe = val.value
				} else {
					this.userInfo.loveRequirement = val.value
				}
			},
			// 单列不滚动
			singleNoClose() {
				this.singleNoShow = false;
				// userInfo.waitApprovedImg
			},
			showSingleNoPopup(Index) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uploadFile('', res.tempFilePaths[0], 'file', {}).then(res => {
							var params = {};
							if (Index == 0) {
								params = {
									userId: this.vuex_userid,
									openId: this.vuex_openid,
									token: this.vuex_token,
									img1: res.data
								}
							} else if (Index == 1) {
								params = {
									userId: this.vuex_userid,
									openId: this.vuex_openid,
									token: this.vuex_token,
									img2: res.data
								}
							} else if (Index == 2) {
								params = {
									userId: this.vuex_userid,
									openId: this.vuex_openid,
									token: this.vuex_token,
									img3: res.data
								}
							}
							updateUserInfo(
								params
							).then(res => {
								uni.hideLoading();
								this.getUserInfo();
							}).catch({

							})
						}).catch({

						})
					}
				});
			},
			gotoEditText(type, value) {
				var that = this;
				uni.navigateTo({
					url: "/pagesme/me/editAbout?type=1" + '&introduce=' + value
				})

			},
			gotoeditInfo() {
				var that = this;
				uni.navigateTo({
					url: "/pagesme/me/detailInfo"
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .uni-slider-handle-wrapper {
		background-color: #000000;
	}

	page {
		background-color: #F4F5F9;
	}

	view,
	scroll-view,
	swiper,
	button,
	input,
	textarea,
	label,
	image {
		box-sizing: border-box; //设置padding和border 不会改变盒子原有的大小
	}

	.h3 {
		height: 3rpx;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.h60 {
		height: 60rpx;
	}

	.lh60 {
		line-height: 60rpx;
	}

	.w285 {
		width: 285rpx;
	}

	.mt56 {
		margin-top: 56rpx;
	}

	.h42 {
		height: 42rpx;
	}

	.w42 {
		width: 42rpx;
	}

	.mt36 {
		margin-top: 36rpx;
	}

	.h24 {
		height: 24rpx;
	}

	.mr30 {
		margin-right: 30rpx;
	}

	.w3 {
		width: 3rpx;
	}

	.mt25 {
		margin-top: 25rpx;
	}

	.h48 {
		height: 48rpx;
	}

	.w48 {
		width: 48rpx;
	}

	.fs40 {
		font-size: 40rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.br100 {
		border-radius: 100rpx;
	}

	.w120 {
		width: 120rpx;
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.fwb {
		font-weight: bold;
	}

	.h30 {
		height: 30rpx;
	}

	.w30 {
		width: 30rpx;
	}

	.rowic {
		display: flex;
		align-items: center;
	}

	.mt35 {
		margin-top: 35rpx;
	}

	.ml30 {
		margin-left: 30rpx;
	}

	.br20 {
		border-radius: 20rpx;
	}

	.bcfff {
		background-color: #FFFFFF;
	}

	.p30 {
		padding: 30rpx;
	}

	.w690 {
		width: 690rpx;
	}

	.relative {
		position: relative;
	}

	.bc000 {
		background-color: #000000;
	}

	.fs99 {
		font-size: 99rpx;
	}

	.br24 {
		border-radius: 24rpx;
	}

	.h150 {
		height: 150rpx;
	}

	.w150 {
		width: 150rpx;
	}

	.warp {
		flex-wrap: wrap;
	}

	.pr30 {
		padding-right: 30rpx;
	}

	.rowjbic {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ml30 {
		margin-left: 30rpx;
	}

	.crowjb {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.br10 {
		border-radius: 10rpx;
	}

	.h52 {
		height: 52rpx;
	}

	.lh52 {
		line-height: 52rpx;
	}

	.w186 {
		width: 186rpx;
	}

	.top0 {
		top: 0rpx;
	}

	.absolute {
		position: absolute;
	}

	.rowjcic {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.blc {
		background: #eee;
	}

	.h328 {
		height: 328rpx;
	}

	.br24 {
		border-radius: 24rpx;
	}

	.w328 {
		width: 328rpx;
	}

	.pt40 {
		margin-bottom: 40rpx;
	}

	.pl32 {
		padding-left: 32rpx;
	}

	.pr32 {
		padding-right: 32rpx;
	}

	.lh44 {
		line-height: 44rpx;
	}

	.fs28 {
		font-size: 28rpx;
	}

	.c333 {
		color: #333333;
	}

	.ml14 {
		margin-left: 14rpx;
	}

	.fs24 {
		font-size: 24rpx;
	}

	.lh32 {
		line-height: 32rpx;
	}

	.tc {
		text-align: center;
	}

	.br-50 {
		border-radius: 50%;
	}

	.cfff {
		color: #FFFFFF;
	}

	.h32 {
		height: 32rpx;
	}

	.mt8 {
		margin-top: 8rpx;
	}

	.w-100 {
		width: 100%;
	}

	.pt30 {
		padding-top: 30rpx;
	}

	.pb60 {
		padding-bottom: 60rpx;
	}

	.pr40 {
		padding-right: 40rpx;
	}

	.pl72 {
		padding-left: 72rpx;
	}

	.pb60 {
		padding-bottom: 60rpx;
	}

	.rowa {
		display: flex;
	}

	.mw32 {
		max-width: 32rpx;
		min-width: 32rpx;
	}

	.circle {
		width: 33rpx;
		// height: 66rpx;
		border-radius: 0 33rpx 33rpx 0;

		background-color: #F4F5F9;
	}

	.circleA {
		width: 33rpx;
		// height: 66rpx;
		border-radius: 0 33rpx 33rpx 0;
		transform: rotate(180deg);
		background-color: #F4F5F9;
	}

	.slider-box {
		margin: 0 0;
	}

	// 单列不滚动
	.singleNo {
		width: 100%;
		height: auto;
		background-color: #F7F7F7;

		.singleNo-item {
			width: 100%;
			height: 108rpx;
			background-color: #fff;
			line-height: 108rpx;
			text-align: center;
			font-weight: 400;
			color: #000000;
			font-size: 32rpx;
			border-bottom: 2rpx solid #f7f7f7;
			// -webkit-background-clip: text;
		}

		.linkage-close {
			width: 750rpx;
			height: 108rpx;
			text-align: center;
			line-height: 108rpx;
			font-size: 32rpx;
			font-weight: 400;
			background-color: #fff;
			margin-top: 16rpx;
		}
	}
</style>